<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import cabinet from '@/api/cabinet/cabinet.js'

const animationDuration = 3000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      cabinet.get().then(res1 => {
        cabinet.get({
          page: 0,
          size: res1.totalElements
          // sort: 'id,desc'
        }).then(res => {
          var eCabnietCount = 0;
          var eMeterCount = 0;
          var eBillCount = 0;
          var eUseCount = 0;
          var eNoUseCount = 0;
          var wCabnietCount = 0;
          var wMeterCount = 0;
          var wBillCount = 0;
          var wUseCount = 0;
          var wNoUseCount = 0;
          var nCabnietCount = 0;
          var nMeterCount = 0;
          var nBillCount = 0;
          var nUseCount = 0;
          var nNoUseCount = 0;
          var wMeterLenght = [];
          var WSmartLenght = [];
          var eMeterLenght = [];
          var eSmartLenght = [];
          var nMeterLenght = [];
          var nSmartLenght = [];
          res.content.forEach(item => {
            if(item.area == '东区') {
              eCabnietCount++;
              eMeterCount = item.meters.length;
              item.smartModules.forEach(item1 => {
                eBillCount += item1.state.length;
                item1.state.forEach(state => {
                  if(state.open == true) {
                    eUseCount++;
                  }else eNoUseCount++;
                })
              })
            }else if(item.area == '西区') {
              wCabnietCount++;
              wMeterCount = item.meters.length;
              item.smartModules.forEach(item1 => {
                wBillCount += item1.state.length;
                item1.state.forEach(state => {
                  if(state.open == true) {
                    wUseCount++;
                  }else wNoUseCount++;
                })
              })
            }else if(item.area == '北区') {
              nCabnietCount++;
              nMeterCount = item.meters.length;
              item.smartModules.forEach(item1 => {
                nBillCount += item1.state.length;
                item1.state.forEach(state => {
                  if(state.open == true) {
                    nUseCount++;
                  }else nNoUseCount++;
                })
              })
            }
          })
          this.chart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            radar: {
              radius: '66%',
              center: ['50%', '48%'],
              splitNumber: 8,
              splitArea: {
                areaStyle: {
                  color: 'rgba(127,95,132,.3)',
                  opacity: 1,
                  shadowBlur: 45,
                  shadowColor: 'rgba(0,0,0,.5)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 15
                }
              },
              indicator: [
                { name: '充电柜数量', max: eCabnietCount + 2 },
                { name: '充电仓总数', max: eBillCount + 2 },
                { name: '电表个数', max: eMeterCount + 2 },
                { name: '使用个数', max: eUseCount + 2 },
                { name: '未使用个数', max: eNoUseCount + 2 }
              ]
            },
            legend: {
              left: 'center',
              bottom: '10',
              data: ['东区', '西区', '北区']
            },
            series: [{
              type: 'radar',
              symbolSize: 0,
              tooltip: {
                trigger: 'item'
              },
              areaStyle: {
                normal: {
                  shadowBlur: 13,
                  shadowColor: 'rgba(0,0,0,.2)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1
                }
              },
              data: [
                {
                  value: [eCabnietCount, eBillCount, eMeterCount, eUseCount, eNoUseCount],
                  name: '东区'
                },
                {
                  value: [wCabnietCount, wBillCount, wMeterCount, wUseCount, wNoUseCount],
                  name: '西区'
                },
                {
                  value: [nCabnietCount, nBillCount, nMeterCount, nUseCount, nNoUseCount],
                  name: '北区'
                }
              ],
              animationDuration: animationDuration
            }]
          })
        })
      })
    }
  }
}
</script>
